@extends('layouts.app')

@section('title', '商圈餐饮商家列表')

@section('css-import')

<!-- <link rel="stylesheet" type="text/css" href="{{config('app.inlet_src')}}/assets/css/htmleaf-demo.css"> -->
<link rel="stylesheet" href="{{config('app.inlet_src')}}assets/css/baguetteBox.min.css">
<!-- <link rel="stylesheet" href="{{config('app.inlet_src')}}/assets/css/gallery-grid.css"> -->
<style type="text/css">
	.identitycardimg_sty{
		width:300px;
		display:block;
	}
	.qrcodeimg{
		cursor:pointer;
	}
	.page-s{
		display: inline-block;
		padding-bottom: 0px;
		margin: 29px 9px;
		border-radius: 4px;
		float:  right;
	}
</style>
@endsection

@section('content-fluid')
<div class="row">
	<!-- BASIC TABLE -->
	<div class="panel">
		<div class="panel-heading">
			<h3 class="panel-title">乐享商家</h3>
		</div>
		<form action="/shopList" method="get">
			<div class="input-group col-md-4 pull-right" style="z-index: auto;">
				<input type="text" value="{{$_GET['shop_name'] ?? ''}}" class="form-control app-search-text" name="shop_name" AUTOCOMPLETE="off" placeholder="搜索商户名">
				<span class="input-group-btn"><button type="submit" class="btn btn-primary search-jslx"><i class="fa fa-search"></i></button></span>
			</div>
		</form>
		<div class="panel-body">
			<table class="table table-hover">
				<thead>
					<tr>
						<th>#</th>
						<th>店铺名</th>
						<th>手机号</th>
						<th>入驻时间</th>
						<th>账户余额</th>
						<th>地址</th>
						<th>商圈</th>
						<th>结单二维码</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					@foreach($shops as $k=>$v)
					<tr>
						<td class="shopid">{{$v->shop_id}}</td>
						<td class="shopname">{{$v->shop_name}}</td>
						<td>{{$v->tel}}</td>
						<td>{{date('Y-m-d H:i',$v->insert_time)}}</td>
						<td>{{$v->account}}</td>
						<td>{{$v->shop_address}}</td>
						<td class="circlename">{{$v->circle_name}}</td>
						<td>
							<a href="javascript:void(0);" onclick="urlClick('{{$v->shop_qrcode}}',this);">二维码</a>
						</td>
						<td>
							<a href="/shopDetails?shopid={{$v->shop_id}}"><i class="fa fa-info-circle"></i> 查看</a>
							<a href="javascript:void(0);" onclick="inputClick(this)"><i class="fa fa-info-circle"></i> 商圈设置</a>
						</td>
					</tr>
					@endforeach
				</tbody>
			</table>
			{{ $shops->links() }}
			<div class="page-s">本页共{{ $shops->count() }}条</div>
			<div class="page-s">共{{ $shops->total() }}条</div>
			<div class="page-s">当前第{{ $shops->currentPage() }}页</div>
			<div class="page-s">共{{ $shops->lastPage() }}页</div>
		</div>
		
	</div>
	<!-- END BASIC TABLE -->
</div>
<div class="modal fade" tabindex="-1" id="exampleModal" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <form action="/edit/shop/circle" method="post" id="circleEditForm">
	      <div class="modal-body">
            
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
      </form>
    </div>
  </div>
</div>
<img src="" class="identitycardimg identitycardimg_sty center-block hide">
@endsection

@section('js-import')
<script type="text/javascript" src="{{config('app.inlet_src')}}assets/scripts/baguetteBox.min.js"></script>
@endsection

@section('js-write')
<script type="text/javascript">
	baguetteBox.run('.tz-gallery');
	function urlClick(url,this_l) {
		var this_ = $('<img src="" width="30" title="点击放大" class="qrcodeimg">');
		var modal = $('#exampleModal');
		modal.find('.modal-body').empty();
		modal.find('.modal-title').html($(this_l).parents('tr').find('.shopname').html()+'的二维码');
	    $(this_).attr('src',"{{$qrcodepath}}"+'/'+url).attr('class','identitycardimg identitycardimg_sty center-block');
	    modal.find('.modal-body').append($(this_));
	    modal.find('.saveCateImage').remove();
		$('#exampleModal').modal();
	}
	function inputClick(this_l) {
		var circlename = $(this_l).parents('tr').find('.circlename').html();
		if(circlename=='未设置'){
			circlename = '';
		}
		var this_ = $('<div class="input-group " style="z-index: auto;"><input type="text" value="'+circlename+'" class="form-control app-search-text" name="circle_name" AUTOCOMPLETE="off" placeholder="搜索商圈"><span class="input-group-btn"><button type="button" class="btn btn-primary search-jslx"><i class="fa fa-search"></i></button></span></div>');
		var modal = $('#exampleModal');
		modal.find('.modal-body').empty();
		modal.find('.modal-title').html($(this_l).parents('tr').find('.shopname').html()+'商圈修改');
	    modal.find('.modal-body').append($(this_));
	    modal.find('.modal-body').append($('<input type="hidden" name="shop_id" value="'+$(this_l).parents('tr').find('.shopid').html()+'">'));
	    if(!modal.find('.saveCateImage').length){
	    	modal.find('.modal-footer').append($('<button type="submit" class="btn btn-primary saveCateImage">保存</button>'));
	    }
		$('#exampleModal').modal();
		$('.search-jslx').click(function(){
			$.ajaxSetup({
			    headers: {
			        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			    }
			});
			$.post('/search/circle',{'circle_name':$('#exampleModal').find('input[name="circle_name"]').val()},function(response){
				if(response.success){
					$('#exampleModal').find('.modal-body').append($('<hr><p class="lead"><span class="label label-info shop-info-name">'+response.data.circle_name+'</span></p> <hr>'));
					$('#circleEditForm').append($('<input type="hidden" name="circle_id" value="'+response.data.circle_id+'">'));
				}else{
					toastr.error(response.message);
				}
			},'json');
		});
	}
	var CouponSendParam = {
	    'dataType':'json',
	    'beforeSubmit':CouponBefore,
	    'success':CouponResponse,
	    'error':toutiaoError,
	};
	function CouponBefore(formData, jqForm, options){
	    
	}
	function CouponResponse(response) {
	    if(response.success){
	        setTimeout(function(){
	            location.href = location.href;
	        },2000);
	        toastr.success(response.message);
	    }else{
	        toastr.error('修改失败，请联系开发人员！');
	    }
	}

	function toutiaoError(XMLHttpRequest, textStatus, errorThrown) {
		if(XMLHttpRequest.status==422){
			var RegError = XMLHttpRequest.responseJSON.errors;
			for(var o in RegError){
				for (var i = 0; i < RegError[o].length; i++) {
					toastr.error(RegError[o][i]);
				}
			}
		}
	}
	ajaxForm_('#circleEditForm', CouponSendParam);
</script>	
@endsection